<template>
  <div class="channel-edit">
    <!-- 1 频道编辑 -->
    <van-cell center :border="false">
      <div slot="title" class="channel-title">我的频道</div>
      <van-button class="btn" type="danger" plain round size="mini" @click="isEdit = !isEdit">
        {{ isEdit? '完成':'编辑' }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item class="grid-item" :icon="(isEdit && index !== 0)? 'clear':''"
        v-for="(channel, index) in userChannels" :class="{ active: index === active }" :key="index"
        :text="channel.name" @click="onUserChannelClick(index)" />
    </van-grid>
    <!-- 2 频道推荐 -->
    <van-cell center :border="false">
      <div slot="title" class="channel-title">频道推荐</div>

    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item class="grid-item" v-for="(channel, index) in recommendChannel" :key="index"
        :text=channel.name @click="onAdd(channel)" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    // user-channels 有特殊符号，需要用''包起来，或者用驼峰的写法userChannels
    userChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 所有频道数据列表
      allChannels: [],
      isEdit: false // 控制编辑显示状态
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user']),
    // 推荐频道
    recommendChannel () {
      // 所有频道 - 我的频道 = 推荐频道
      // filter 过滤数组，根据方法返回的布尔值，来收集数据
      // filter 查找满足条件的所有元素
      return this.allChannels.filter(channel => {
        // 判断 channel 是否包含在 我的频道 中
        // find 查找满足条件的单个元素
        return !this.userChannels.find(userChannel => {
          // 找到满足条件的元素
          return userChannel.id === channel.id
        })
      })
    }
  },
  // 监控data中的数据变化
  watch: {},
  methods: {
    // 获取全部列表频道
    async loadAllChannels () {
      const { data } = await getAllChannels()
      // console.log(data)
      this.allChannels = data.data.allChannels
    },
    // 点击添加频道
    async onAdd (channel) {
      this.userChannels.push(channel)
      // TODO:数据持久化
      if (this.user) {
        // 登录状态,数据存储到线上
        // 官方原请求代码
        // addUserChannel({
        //   channels:[
        //     {id: channel.id,seq: this.userChannels.length,}
        //   ]
        // })
        // 自己设置的接口请求代码
        const { data } = await addUserChannel({
          channels: this.userChannels
        })
        const { channels } = data.data
        setItem('user-internet-channels', channels)
      } else {
        // 非登录状态,数据存储到本地上
        setItem('user-local-channels', this.userChannels)
      }
    },
    // 点击用户频道删除或跳转
    onUserChannelClick (index) {
      // 推荐频道不能删除
      if (this.isEdit && index !== 0) {
        // 编辑中,点击进行删除
        // splice 从索引开始，删除一个数
        this.userChannels.splice(index, 1)
        // 解决active索引错误
        if (index < this.active) {
          // 更新激活的频道索引
          // 不要直接 this.active - 1 ，而是直接改变父组件那边的值
          this.$emit('update-active', this.active - 1)
        } else if (index === this.active) {
          this.$emit('update-active', 0)
        }
        // 数据持久化
        if (this.user) {
          setItem('user-internet-channels', this.userChannels)
        } else {
          setItem('user-local-channels', this.userChannels)
        }
      } else {
        // 非编辑状态，进行频道切换
        // 子组件可以使用 $emit 触发父组件的自定义事件
        // 1 切换频道
        this.$emit('update-active', index)
        // 2 关闭弹出层
        this.$emit('close')
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.loadAllChannels()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
.channel-edit {
  padding-top: 54px;
  // 编辑按钮
  .btn {
    width: 50px;
  }
  .channel-title {
    font-size: 16px;
    color: #333;
  }
  .grid-item {
    width: 80px;
    height: 43px;
    text-align: center;
    // grid 自带的背景色将我们添加的所遮盖
    /deep/ .van-grid-item__content {
      background-color: #f4f5f6;
    }
    /deep/ .van-grid-item__text {
      font-size: 14px;
      color: #222;
      margin-top: 0;
    }
    /deep/ .van-grid-item__icon {
      position: absolute;
      top: -5px;
      right: -5px;
      font-size: 16px;
      color: #cccccc;
    }
  }
  // 频道选中高亮
  .active {
    /deep/ .van-grid-item__text {
      color: red;
    }
  }
}
</style>
